<template>
	<div style="width: 90vw;margin-left: 5vw;">
		<!-- 头部 -->
		
		<div style="width: 90vw;height: 8vh;display: flex;line-height: 8vh;margin-top: 2vh;">
			<div style="width: 45vw;text-align: left;">
				<van-icon name="arrow-left" @click="back" size="20"/>
			</div>
			<div style="width: 45vw;text-align: left; font-size: 1.5rem;font-weight: bold;">设置</div>
		</div>
		<!-- 头像 -->
		<div v-if="this.userInfo">
		<div style=" margin-top: 1vh; width: 90vw;height: 17vh;border: 1px solid #f1f1f1;box-shadow: 2px 2px #f1f1f1;">
			<div style="display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="width: 20vw;height: 13vh;">
				<img :src="this.userInfo.headerImg" style="margin-left: 2vw; margin-top: 2vh; width: 15vw;height: 9vh;border-radius: 50%;">
			</div>
			<div style="width: 60vw;height: 10vh;font-weight: bold;margin-top: 3vh; text-align: left;padding-left: 4vw;">
				<div>{{this.userInfo.nickName}}</div>
				<div>{{this.userInfo.lastLogin}}</div>
			</div>
			</div>
		<!-- 	<div v-else>
				请登录
			</div> -->
			
			<div style="width: 10vw;height: 13vh;line-height: 15vh;">
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
			<div style="width: 90vw;height:5vh;display: flex;">
			<div style=" text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				账户与安全
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
		</div>
		
		
		<div style=" margin-top: 2vh; width: 90vw;height: 10vh;border: 1px solid #f1f1f1;box-shadow: 2px 2px #f1f1f1;">
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				账户与安全
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				支付
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
		</div>
		
		<div style=" margin-top: 2vh; width: 90vw;height: 15vh;border: 1px solid #f1f1f1;box-shadow: 2px 2px #f1f1f1;">
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				消息通知
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				隐私
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				通用
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
		</div>
		
		<div style=" margin-top: 2vh; width: 90vw;height: 10vh;border: 1px solid #f1f1f1;box-shadow: 2px 2px #f1f1f1;">
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				帮助与反馈
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
			
			<div style="width: 90vw;height:5vh;display: flex;border-bottom: solid 1px #f1f1f1;">
			<div style="text-align: left; width: 80vw;height: 5vh;line-height: 5vh;padding-left: 3vw;color: #999;font-size: 1.2rem;">
				关于更新
			</div>
			<div>
				<van-icon name="arrow" size="25" color="#CBCBCB"/>
			</div>
			</div>
		</div>
		<!-- 切换账户 -->
		<div style="width: 90vw;height: 6vh;margin-top: 6vh;">
			<button type="button" style="font-size: 1.5rem; color: aliceblue; line-height: 6vh; border-radius: 10px; width: 90vw;height: 6vh;background-color: #222222;">
				切换账户
			</button>
		</div>
		<!-- 退出登录 -->
		<div style="width: 90vw;height: 6vh;margin-top: 2vh;">
			<button @click="outLogin" type="button" style="font-size: 1.5rem; color: aliceblue; line-height: 6vh; border-radius: 10px; width: 90vw;height: 6vh;background-color: #222222;">
				退出登录
			</button>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				userInfo:{}
			}
		},
		methods:{
            back(){
				this.$router.go(-1)
			},
			outLogin(){
				localStorage.removeItem('userInfo')
				this.$router.push('/mine')
			}
		},
		created() {
			let userInfo=JSON.parse(localStorage.getItem('userInfo'))
			this.userInfo=userInfo
		}
	}
</script>

<style>
</style>
